<template>
  <view class="bg"></view>
  <view class="custom-tabbar">
    <view
        class="tab-item"
        @click="switchTo('/pages/HomePage/HomePage')"
    >
      <image :src="currentPath === '/pages/HomePage/HomePage' ? selectedHome : home"></image>
      <text>请假申请</text>
    </view>
    <view
        class="tab-item"
        @click="switchTo('/pages/user/user')"
    >
      <image :src="currentPath === '/pages/user/user' ? selectedRecord : record"></image>
      <text>请假记录</text>
    </view>
  </view>
  <view id="background">
    <view id="h1">
      <view id="h1_1">
        <view id="circle">
          <view id="surname">张</view>
        </view>
        <view class="name-container">
          <view id="name">张小白</view>
          <view id="studentId">2020090911004</view>
        </view>
      </view>
      <view class="words">请假类型: 回家</view>
      <view class="words">申请时间：2022-11-26 17:56:32</view>
      <view class="words">开始时间：2022-11-26 17:56:32</view>
      <view class="words">结束时间：2022-11-26 17:56:32</view>
      <view id="bottom">
        <view>
          <image id="picture" src="/static/image/picture/clock.png"></image>
        </view>
        <view id="words_1">请假申请流程进行中</view>
      </view>
    </view>
  </view>
  <view id="background_2">
    <view class="bottom-tip-container">
      <view id="h2">返校申请至少提前一天申请</view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const home = '/static/home/home.png'
const selectedHome = '/static/home/homeselected.png'
const record = '/static/dingdan/dingdan.png'
const selectedRecord = '/static/dingdan/dingdanselected.png'

const currentPath = ref('')

onLoad(() => {
  // 后续可根据需要恢复路径获取逻辑
  // const pages = getCurrentPages();
  // if (pages.length > 0) {
  //   currentPath.value = pages[pages.length - 1].route;
  // }
})

const switchTo = (url) => {
  uni.switchTab({ url })
}
</script>

<style scoped>
.bg{
  width: 100%; /* 改为全屏宽度，与中间内容更好衔接 */
  height: 119px;
  background: linear-gradient(180.00deg, #2264ff 0%, #f5f5f5 100%);
}
.custom-tabbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #fff;
  border-top: 1px solid #eee;
  z-index: 999;
}
.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tab-item image {
  width: 24px;
  height: 24px;
}
.tab-item text {
  font-size: 10px;
  color: #7A7E83;
}
.tab-item.active text {
  color: #3cc51f;
}
.bottom-tip-container {
  position: fixed;
  bottom: 50px;
  left: 0;
  right: 0;
  padding: 0 20rpx;
  z-index: 998;
}

#h2{
  font-weight: 400;
  font-size: 14rpx;
  color: #999;
  text-align: center;
  padding: 8rpx 12rpx;
  background-color: #fff;
  border-top: 1rpx solid #eee;
}

#background{
  display: flex;
  justify-content: center;
  padding-top: 15px; /* 增加顶部间距，使与上方渐变背景衔接更自然 */
}
#background_2{
  display: flex;
  justify-content: center;
}
#h1{
  width: 345px;
  min-height: 170px; /* 改为最小高度，避免内容溢出 */
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 4px #c8c7cc;
  padding: 15px; /* 增加内边距，让内容更舒展 */
  margin-top: -25px; /* 调整与上方的距离，更贴近渐变背景 */
  position: relative;
  z-index: 10; /* 确保在背景之上 */
}

#h1_1{
  display: flex;
  align-items: center; /* 垂直居中对齐，使内容更紧凑 */
  gap: 15px; /* 增加元素间间距 */
  margin-bottom: 15px; /* 与下方内容拉开距离 */
}

#circle{
  width: 45px;
  height: 45px;
  border-radius: 45px;
  background-color: #2264ff;
  flex-shrink: 0; /* 防止圆形被压缩 */
}

#surname{
  color: #f8f8f8;
  text-align: center;
  line-height: 45px; /* 用行高居中，替代margin-top */
  font-weight: 700;
  font-size: 18px;
}

.name-container {
  display: flex;
  flex-direction: column;
  gap: 5px; /* 姓名和学号之间增加间距 */
}

#name{
  font-weight: 700;
  font-size: 17px;
  color: #1a1a1a;
  margin: 0; /* 移除负边距，避免位置偏移 */
}

#studentId{
  color: #999999;
  font-weight: 400;
  font-size: 16px;
  margin: 0; /* 移除默认边距 */
}

.words{
  margin-top: 8px; /* 增加行间距，使内容更清晰 */
  font-weight: 400;
  font-size: 14px;
  text-align: left;
  color: #808080;
}

#bottom{
  display: flex;
  margin-top: 12px; /* 与上方内容增加距离 */
  align-items: center; /* 图标和文字垂直居中 */
}

#picture{
  width: 20px;
  height: 20px;
  margin-top: 0; /* 移除顶部margin，用align-items居中 */
}

#words_1{
  margin: 0 0 0 5px; /* 调整边距，仅保留左间距 */
  font-weight: 400;
  font-size: 13px;
  color: #2264ff;
}
</style>